<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>主题网页</title>
</head>





<body>
    <div class="whole">
  <!-- 导航栏 6-->
  <nav>
    <div class="logo">
      <a href="https://www.mihoyo.com/" target="_blank">miHoYo</a>
    </div>
    <ul class="nav-links">
      <li><a href="https://ys.mihoyo.com/" target="_blank">官网</a></li>
      <li><a href="https://bbs.mihoyo.com/ys/" target="_blank">论坛</a></li>
      <li><a href="https://www.bilibili.com/" target="_blank">视频</a></li>
    </ul>
  </nav>
  <div class="head">
            <img class="img1" src="./imgs/米哈游.png">
            <img class="img2" src="./imgs/原神.png">
        </div>

        <div class="banner">
            <div class="class0">
                <div class="class1 class2"><a href="#" target="_blank">蒙德</a></div>
                <div class="class1 class3"><a href="#" target="_blank">璃月</a></div>
                <div class="class1 class4"><a href="#" target="_blank">稻妻</a></div>
                <div class="class1 class5"><a href="#" target="_blank">枫丹</a></div>
                <div class="class1 class6"><a href="#" target="_blank">须弥</a></div>
                <div class="class1 class7"><a href="#" target="_blank">纳塔</a></div>
            </div>
        </div>

  <!-- 轮播图 -->
  <div class="slideshow-container">
    <div class="mySlides fade">
      <img src="./imgs/image1.jpg" alt="原神场景1">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image2.jpg" alt="原神场景2">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image3.jpg" alt="原神场景3">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image4.jpg" alt="原神场景4">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image5.jpg" alt="原神场景5">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image6.jpg" alt="原神场景6">
    </div>
    <div class="mySlides fade">
      <img src="./imgs/image7.jpg" alt="原神场景7">
    </div>
    
    <!-- 轮播图按钮 -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span>
    <span class="dot" onclick="currentSlide(5)"></span>
    <span class="dot" onclick="currentSlide(6)"></span>
    <span class="dot" onclick="currentSlide(7)"></span>
  </div>

  <!-- 主要内容 -->
  <section class="content">
    <h1>欢迎来到原神的世界</h1>
    <p>原神是由米哈游开发的开放世界冒险游戏，在这里你可以探索神秘的提瓦特大陆，邂逅各种性格各异的角色，体验精彩的剧情和战斗。</p>
    <a href="https://ys.mihoyo.com/" target="_blank" class="btn">进入原神官网</a>
  </section>

  <script src="script.js"></script>
</div>
</body>

</html>
